<template>
  
<div class="box">
<div class="boxone">
   <div class="block">
      <span class="demonstration">考勤日期:</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="考勤日期"
        :default-value="new Date(2010, 9, 1)"
      />
    </div>
             <el-button type="primary">导出</el-button>
</div>
 
    <div class="boxtwo">
       
    <el-table :data="tableData" border style="width: 100%" stripe="ture">
      <el-table-column prop="date" align='center' label="序号" width="70" />
      <el-table-column prop="name" align='center' label="年级班级" width="188" />
      <el-table-column prop="address"  width="187" align='center' label="学生姓名" />
      <el-table-column prop="address"  width="187" align='center' label="性别" />
      <el-table-column prop="address"  width="187" align='center' label="学籍号" />
      <el-table-column prop="address"  width="187" align='center' label="今日考勤状态" />
      <el-table-column prop="address"  width="187" align='center' label="电话号码" />
    </el-table>
    <div class="boxstree">
         <el-pagination
    small
    background
    layout="prev, pager, next"
    :total="50"
    class="mt-4"
  />
    </div>
    </div>
</div>
</template>

<script setup>
import { ref } from 'vue'
const tableData = [
 
   {
    date: "1",
    name: "Tom",
    address: "No. 189"
  },
   {
    date: "1",
    name: "Tom",
    address: "No. 189"
  },
 
];
// 日期配置


const value1 = ref('')

</script>

<style scoped>
.box{
    width: 100%;
} 
.boxtwo{
  width: 95%;
  background-color:  #fff;
  margin: 0 auto;
  text-align: center;

}
.el-option{
    margin-left: 5px;
}
.boxone{
    width: 95%;
    height: 50px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    /* background-color: aliceblue; */
    
}
.boxone>.el-button{
    margin:  10px 0;


}
.boxstree{
  margin-left: 80%;
  margin-top: 20px;
  height: 35px;
}



</style>